<template>
  <!-- INFO开始列表 -->
  <div>
    <!-- INFO面包屑 -->
    <bread-crumb-view
      :breadList="breadList"
      style="margin-bottom: 30px"
    ></bread-crumb-view>
    <!-- INFO表格 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%; padding: 20px; border: 1px solid #ebeef5"
    >
      <el-table-column prop="authName" label="权限名"> </el-table-column>
      <el-table-column prop="path" label="权限路径"> </el-table-column>
      <el-table-column prop="level" label="权限等级">
        <template slot-scope="scope">
          <el-button v-if="scope.row.level" :type="list[scope.row.level].color">
            {{ list[scope.row.level].title }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import BreadCrumbView from "@/components/BreadCrumbView.vue";
import permissions from "@/api/permissions";
export default {
  components: { BreadCrumbView },
  name: "RightsView",

  data() {
    return {
      name: "moumou",
      list: [
        {
          color: "primary",
          title: "一级",
        },
        {
          color: "danger",
          title: "二级",
        },
        {
          color: "success",
          title: "三级",
        },
      ],
      breadList: ["权限管理", "权限列表"],
      tableData: [],
    };
  },
  methods: {
    async init() {
      let res = await permissions.getRightsList();
      this.tableData = res;
    },
    fn(val) {
      console.log(val);
    },
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
:deep(.el-main) {
  line-height: 0px;
}
</style>